<template>
  <Category :disable="showState !== 0"/>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <SpuList v-if="showState === 0" @setState="setState"/>
    <SpuForm v-if="showState === 1"  :spuInfo="spuInfo"  @setState="setState"/>
    <SkuForm v-if="showState === 2"  @setState="setState" :spuInfo="spuInfo"/>
  </el-card>
  
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Spu",
});
</script>

<script setup lang="ts">
import { ref } from "vue";

import SpuForm from "./components/SpuForm/index.vue";
import SkuForm from "./components/SkuForm/index.vue";
import SpuList from "./components/SpuList/index.vue";
import type { SpuInfoType } from "@/api/spu";
import useAttrStore from "@/stores/attr";
import { storeToRefs } from "pinia";
const showState = ref(0)
//拿到pinia中三级分类数据
const attrStore = useAttrStore()
const { category3Id } = storeToRefs(attrStore)
//定义一个初始数据
const spuInfo = ref<SpuInfoType>({
  category3Id: category3Id.value,
  description: "",
  spuName: "",
  tmId: null,
  spuImageList: [],
  spuSaleAttrList: [],
})
//封装得自定义事件
const setState =(state:number,row?:SpuInfoType)=>{
  showState.value = state
  if(row){
    spuInfo.value = row
  }else{
    //因为数据是保存在当前页面得 所以当进入修改后 又退回来 当前页面数据还是没有变化，所以需要清除页面得state数据
    spuInfo.value = {
            category3Id: category3Id.value,
            description: "",
            spuName: "",
            tmId: null,
            spuImageList: [],
             spuSaleAttrList: [],
    }
  }
}

</script>
